<template>
    <div>
        <Card class="info-card">
            <div slot="title"><h3 style="text-align: center;">基本资料</h3></div>
            <div class="card-body">
                <div class="avatar">
                    <img :src="data.avatarUrl" alt="个人头像">
                </div>
                <div class="c-info">
                    <div class="c-item">
                        <Icon type="ios-person-outline" style="margin-right: 10px;" />
                        <strong>名字：</strong>
                        <span>{{data.name}}</span>
                    </div>
                    <div class="c-item">
                        <Icon type="ios-chatboxes-outline" style="margin-right: 10px;" />
                        <strong>openid：</strong>
                        <span>{{data.openid}}</span>
                    </div>
                    <div class="c-item">
                        <Icon type="ios-call-outline" style="margin-right: 10px;" />
                        <strong>电话：</strong>
                        <span>{{data.phone}}</span>
                    </div>
                    <div class="c-item">
                        <Icon type="ios-time-outline" style="margin-right: 10px;" />
                        <strong>入档日期：</strong>
                        <Time :time="data.createTime" type="datetime"/>
                    </div>
                    <div class="c-item mt20" >
                        <Button @click="showChangeModal"  type="info" class="mr40">修改信息</Button>
                        <Button @click="goToPassword"  type="success">修改密码</Button>
                    </div>
                </div>
            </div>
        </Card>
        <!--修改弹窗-->
        <Modal :closable=false
               title="修改个人信息"
               v-model="modal_change"
               ok-text="确定"
               @on-ok="handleSubmit('change_row',change_row)"
               class-name="vertical-center-modal">
            <div>
                <Form ref="change_row" :model="change_row" :rules="ruleInline">
                    <FormItem prop="name" label="名字">
                        <Input type="text" v-model="change_row.name" placeholder="name"></Input>
                    </FormItem>
                    <FormItem prop="phone" label="手机号">
                        <Input type="number" v-model="change_row.phone" placeholder="请输入手机号码"></Input>
                    </FormItem>
                    <Input type="text" v-model="change_row.avatarUrl" style="display: none;"></Input>
                    <Avatar :src="change_row.avatarUrl" size="large"/>
                    <Upload action="/api/common/upload/avatar" :show-upload-list="false" class="upload-btn"
                            :headers="$store.state.upHeaders" :on-success="onUploadChangeAvatar">
                        <i-button icon="ios-cloud-upload-outline">上传头像</i-button>
                    </Upload>
                </Form>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {judgePhone} from "../utils/util";
    import store from "../store";
    import {Message} from "element-ui";

    export default {
        name: 'myinfo',
        data () {
            const phoneValidate = (rule, value, callback) => {
                let error = judgePhone(value);
                if (error===''){
                    let adminId = this.change_row.adminId
                    this.request({
                        url: '/admin/phone/judge',
                        method: 'get',
                        params: {phone: value, adminId: adminId}
                    }).then((res) =>{
                        if (res.data===false){
                            callback(new Error('该号码已经被注册'))
                        }else {
                            //检查通过
                            callback()
                        }
                    })
                }else {
                    callback(new Error(error))
                }
            }
            return {
                data:store.state.userInfo,
                userId:Number,
                modal_change: false,
                change_row: {
                    adminId: null,
                    avatarUrl: null,
                    name: null,
                    phone: null,
                    password: null,
                    createTime: null
                },
                ruleInline: {
                    name: [
                        {required: true, message: '名字不能为空', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, validator: phoneValidate, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: 'Please fill in the password.', trigger: 'blur'},
                        {
                            type: 'string',
                            min: 6,
                            message: 'The password length cannot be less than 6 bits',
                            trigger: 'blur'
                        }
                    ]
                },
            }
        },
        created() {
            this.userId = store.state.userInfo.adminId
        },
        methods: {
            find() {
                this.request({
                    url: '/admin/'+this.userId,
                    method: 'get',
                }).then(res => {
                    console.log(res)
                    this.data = res.data
                })
            },
            goToPassword(){
                this.$router.push({ path:'password'  })
            },
            //修改提交数据
            handleSubmit(name, data) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.request({
                            url: '/admin',
                            method: 'put',
                            data: JSON.stringify(data),
                        }).then(res => {
                            this.find()         //更新修改行的数据
                            this.$Message.success(res.msg);
                            store.dispatch('updateInfo')
                        })
                    } else {
                        this.$Message.error('操作失败!');
                    }
                })
            },
            showChangeModal() {
                //展示弹窗
                this.modal_change = true
                this.formName = 'change'    //用于电话检验
                //要修改的信息
                this.change_row.adminId = this.data.adminId
                this.change_row.avatarUrl = this.data.avatarUrl
                this.change_row.name = this.data.name
                this.change_row.phone = this.data.phone
                this.change_row.password = this.data.password
                this.change_row.createTime = this.data.createTime
            },
            onUploadChangeAvatar(response, file, fileList) {
                // console.log(response)
                //上传头像成功，返回Url
                this.change_row.avatarUrl = response.msg
            }
        }
    }
</script>

<style scoped>
    .info-card{
        width: 60%;
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .card-body{
        padding-bottom: 50px;
    }
    .card-body .avatar{
        width: 100px;
        height: 100px;
        margin: 20px auto;
    }
    .card-body .avatar img{
        width: 100px;
        height: 100px;
    }
    .card-body .c-info{
        width: 320px;
        margin: 0 auto;
    }
    .card-body .c-info .c-item{
        margin-bottom: 13px;
        font-size: 16px;
    }
    .card-body .c-info .c-item strong{
        margin-right: 20px;
        width: 80px;
        display: inline-block;
    }
</style>
